import React from 'react'
import styles from './index.module.scss'
import Counter from '../../Counter'
import classnames from 'classnames'

export default function Meal({ meal, noDes }) {
	return (
		<div className={styles.root}>
			<div className="mealImgWrapper">
				<img src={meal.img} alt="" />
			</div>
			<div className="mealDescWrapper">
				<h2 className="title">{meal.title}</h2>

				{noDes ? null : <div className="desc">{meal.desc}</div>}

				<footer>
					<div className="price">{meal.price}</div>
					<Counter meal={meal} className={classnames(noDes? 'noDes': '')}/>
				</footer>
			</div>
		</div>
	)
}
